<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition template="/WEB-INF/tiles/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

	<ui:define name="menu">
		<ui:include src="/WEB-INF/tiles/menu.xhtml" />
	</ui:define>

	<ui:define name="acao">
		<h:form styleClass="navbar-form navbar-right ">
			<div class="form-group" style="padding-top: 0px;">
				<h:inputText styleClass="form-control" value="#{homeMB.cpfCnpj}"
					placeholder="Digite o CPF/CNPJ"></h:inputText>
			</div>
			<h:commandButton styleClass="btn btn-success" action="#{homeMB.find}"
				value="Buscar">
			</h:commandButton>
		</h:form>


	</ui:define>

	<ui:define name="body">
		<div class="container">
			<c:if test="${messageChecker.messagePresent}">
				<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert"
						aria-hidden="true">&times;</button>
					<h:messages />
				</div>
			</c:if>

			<h:form rendered="#{homeMB.founded}">
				<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert"
						aria-hidden="true">&times;</button>
					<strong>Atenção!</strong> Este cliente possui aprovações pendentes.
					<h:commandLink value="Clique aqui" action="#{homeMB.pageAprovar}"
						class="btn btn-default">
						<f:param name="cpfCnpj" value="#{flash.cpfCnpj}"></f:param>
					</h:commandLink>
				</div>
			</h:form>
			<c:if test="#{homeMB.founded }">
				<!-- Example row of columns -->
				<div class="row" role="main">
					<div class="col-md-12">
						<h:form styleClass="form-horizontal">
							<div class="">
								<ul class="nav nav-tabs" id="myTab">
									<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
									<li><a data-toggle="tab" href="#extrato">Extrato</a></li>
								</ul>
							</div>
							<div class="tab-content">
								<div class="tab-pane active" id="home">
									<div class="page-header">
										<h4>INFORMAÇÃO PESSOAIS</h4>
									</div>
									<div class="form-group">
										<label for="numero" class="col-sm-2 control-label">CPF</label>
										<div class="col-sm-3">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.cpfCnpj }"></h:outputText>
											</p>
										</div>
									</div>
									<div class="form-group">
										<label for="numero" class="col-sm-2 control-label">Nome
											completo</label>
										<div class="col-sm-5">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.nome }"></h:outputText>
											</p>
										</div>
									</div>
									<div class="form-group">
										<label for="numero" class="col-sm-2 control-label">Data
											Nascimento</label>
										<div class="col-sm-2">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.dataNascimento}">
													<f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
												</h:outputText>

											</p>
										</div>
									</div>
									<div class="page-header">
										<h4>ENDEREÇOS</h4>
									</div>
									<div class="form-group">
										<label for="numero" class="col-sm-2 control-label">CEP</label>
										<div class="col-sm-2">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.cep}"></h:outputText>
											</p>
										</div>
									</div>
									<div class="form-group">
										<label for="numero" class="col-sm-2 control-label">Endereco</label>
										<div class="col-sm-2">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.enderecoCompleto}"></h:outputText>
											</p>
										</div>
									</div>
									<div class="form-group">
										<label for="numero" class="col-sm-2 control-label">Endereço
											completo</label>
										<div class="col-sm-5">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.enderecoCompleto}"></h:outputText>
											</p>
										</div>
									</div>
									<div class="page-header">
										<h4>CONTATO</h4>
									</div>
									<div class="form-group">
										<label for="numero" class="col-sm-2 control-label">Telefone</label>
										<div class="col-sm-2">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.telefone}"></h:outputText>
											</p>
										</div>
									</div>
									<div class="form-group">
										<label for="numero" class="col-sm-2 control-label">Celular</label>
										<div class="col-sm-2">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.celular}"></h:outputText>
											</p>
										</div>
									</div>
									<div class="form-group">
										<h:outputLabel styleClass="col-sm-2 control-label"
											value="Email" />
										<h:panelGroup styleClass="col-sm-3">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.email}"></h:outputText>
											</p>
										</h:panelGroup>
									</div>
									<div class="page-header">
										<h4>RELACIONAMENTO</h4>
									</div>
									<!-- Fara verificacao se existe um limite de credito para o cliente, caso nao  -->
									<div class="form-group">
										<h:outputLabel styleClass="col-sm-2 control-label"
											value="Cheque especial" />
										<h:panelGroup styleClass="col-sm-3">
											<p class="form-control" id="numero">
												<h:outputText value="#{homeMB.cliente.email}"></h:outputText>
											</p>
										</h:panelGroup>
									</div>
									<div class="page-header">
										<h4>CONTAS</h4>
									</div>
									<ui:repeat value="#{homeMB.cliente.produtos}" var="conta">
										<div class="form-group">
											<label for="numero" class="col-sm-2 control-label"><h:outputText
													value="#{conta.modalidade}"></h:outputText></label>
											<div class="col-sm-2 ">
												<p class="form-control" id="numero">
													Ag.:
													<h:outputText value="#{conta.numeroAgencia }"></h:outputText>
												</p>
											</div>
											<div class="col-sm-2 ">
												<p class="form-control">
													CC :
													<h:outputText value="#{conta.numeroConta }"></h:outputText>
												</p>
											</div>
											<div class="col-sm-3">
												<p class="form-control">
													Situacao :
													<h:outputText value="#{conta.situacao }"></h:outputText>
												</p>
											</div>
											<div class="col-sm-3">
												<button type="button" class="btn btn-default"
													data-container="body" data-toggle="popover"
													data-placement="right" data-content="#{conta.saldo}"
													data-title="Saldo Atual">Ver saldo</button>
											</div>
										</div>
									</ui:repeat>
								</div>
								<div class="tab-pane" id="extrato">
									<div class="page-header">
										<h4>Selecione a conta</h4>
									</div>
									<div class="form-group">
										<div class="col-sm-2">
											<p class="form-control" id="numero">
												<p:selectOneMenu value=#{homeMB.contaSelecionada}>
													<f:selectItems  value="#{homeMB.cliente.produtos}" var="conta" itemLabel="#{conta.numeroConta}" itemValue="#{conta.numeroConta}"/>
													<p:ajax update="contaTable" event="change" actionListener="#{homeMB.atualizarContas}"/>
												</p:selectOneMenu>
											</p>
										</div>
									</div>
									<div class="page-header">
										<h4>Detalhe</h4>
									</div>
									<div class="form-group">
									<div class="col-sm-4">
										<p:dataTable id="contaTable" styleClass="table" var="conta" value="#{homeMB.cliente.produtos}">
											<p:column headerText="Numero">
												<h:outputText value="#{conta.numeroAgencia}" />
											</p:column>
											<p:column headerText="Color">
												<h:outputText value="#{conta.numeroConta}" />
											</p:column>
										</p:dataTable>
									</div>
									</div>
								</div>
							</div>
						</h:form>
					</div>
				</div>
			</c:if>
		</div>
	</ui:define>
	<script src="js/vendor/timeliner.min.js"></script>
	<script type="text/javascript">
	$().ready(function() {
		$('#myTab a').click(function (e) {
			  e.preventDefault()
			  $(this).tab('show')
			});
					
		$.timeliner({
			timelineContainer: '#timelineContainer_2'
		});
	});
	</script>
</ui:composition>
